<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2024/4/18
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人中心</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div class="main-wrapper">
    <div class="sidebar-wrapper">
        <%@include file="components/sidebar.html"%>
    </div>
    <div class="main-container">
        <%@include file="components/navbar.html"%>
        <div class="app-container" id="main-app">
            <div class="profile-wrapper">
                <div class="card-container">
                    <div class="card-title">
                        <span>个人信息</span>
                    </div>
                    <div class="card-body">
                        <div class="headimg-box">
                            <img src="assets/img/headimg.svg">
                        </div>
                        <div class="info-box">
                            <div class="info-item">
                                <span><i class="el-icon-user-solid"></i>用户姓名</span>
                                <span>{{userData.name}}</span>
                            </div>
                            <div class="info-item">
                                <span><i class="el-icon-phone"></i>手机号码</span>
                                <span>{{userData.tele}}</span>
                            </div>
                            <div class="info-item">
                                <span><i class="el-icon-s-goods"></i>电子邮箱</span>
                                <span>{{userData.email}}</span>
                            </div>
                            <div class="info-item">
                                <span><i class="el-icon-s-custom"></i>所属角色</span>
                                <span>{{userData.role}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-container" style="width: 73%;">
                    <div class="card-title">
                        <span>基本资料</span>
                    </div>
                    <div class="card-body">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="基本资料" name="first">
                                <div>
                                    <el-row :gutter="15">
                                        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                                            <el-col :span="24">
                                                <el-form-item label="用户姓名" prop="name">
                                                    <el-input v-model="formData.name" placeholder="请输入用户姓名" :maxlength="6" show-word-limit clearable
                                                              :style="{width: '100%'}"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item label="手机号码" prop="mobile">
                                                    <el-input v-model="formData.mobile" placeholder="请输入手机号码" :maxlength="11" show-word-limit
                                                              clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item label="邮箱" prop="mailbox">
                                                    <el-input v-model="formData.mailbox" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item label="性别" prop="sex" style="display: flex; align-items: center; justify-content: start;">
                                                    <el-radio-group v-model="formData.sex" size="medium">
                                                        <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                                                  :disabled="item.disabled">{{item.label}}</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item size="large">
                                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                                    <el-button @click="resetForm">重置</el-button>
                                                </el-form-item>
                                            </el-col>
                                        </el-form>
                                    </el-row>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="修改密码" name="second">
                                <div>
                                    <el-form ref="elFormPswd" :model="formDataPswd" :rules="rulesPswd" size="medium" label-width="100px">
                                        <el-form-item label="旧密码" prop="old">
                                            <el-input v-model="formDataPswd.old" placeholder="请输入旧密码" clearable show-password
                                                      :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                        <el-form-item label="新密码" prop="new">
                                            <el-input v-model="formDataPswd.new" placeholder="请输入新密码" clearable show-password
                                                      :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                        <el-form-item label="确认密码" prop="repeat">
                                            <el-input v-model="formDataPswd.repeat" placeholder="请确认新密码" clearable show-password
                                                      :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                        <el-form-item size="large">
                                            <el-button type="primary" @click="submitPswdForm">提交</el-button>
                                            <el-button @click="resetPswdForm">重置</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- import Vue before Element -->
<script src="assets/js/vue.js"></script>
<!-- import JavaScript -->
<script src="assets/js/axios.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: '#main-app',
        data: function() {
            return {
                password: '',
                userData: {
                    name: '张三七',
                    tele: '18120042855',
                    email: '10001@qq.com',
                    role: '普通用户'
                },
                role: {
                    patient: '普通用户',
                    doctor: '医师',
                    admin: '管理员'
                },
                activeName: 'first',
                formData: {
                    name: '张三七',
                    mobile: '15888884555',
                    mailbox: '10001@qq.com',
                    sex: 1
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入用户姓名',
                        trigger: 'blur'
                    }],
                    mobile: [{
                        required: true,
                        message: '请输入手机号码',
                        trigger: 'blur'
                    }, {
                        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                        message: '手机号格式错误',
                        trigger: 'blur'
                    }],
                    mailbox: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }, {
                        pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
                        message: '',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change'
                    }],
                },
                sexOptions: [{
                    "label": "男",
                    "value": 1
                }, {
                    "label": "女",
                    "value": 2
                }],

                formDataPswd: {
                    old: undefined,
                    new: undefined,
                    repeat: undefined,
                },
                rulesPswd: {
                    old: [{
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请输入旧密码'));
                            } else if (value !== this.password) {
                                callback(new Error('旧密码错误!'));
                            } else {
                                callback();
                            }
                        },
                        required: true,
                        // message: '请输入旧密码',
                        trigger: 'blur'
                    }],
                    new: [{
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请输入新密码'));
                            } else {
                                callback();
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    repeat: [{
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请重复新密码'));
                            } else if (value !== this.formDataPswd.new) {
                                callback(new Error('两次输入不相同!'));
                            } else {
                                callback();
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                },
            }

        },
        methods: {
            handleClick() {

            },
         submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                let u = JSON.parse(localStorage.getItem('user'))
                let data = {
                    name: this.formData.name,
                    phoneNumber: this.formData.mobile,
                    email: this.formData.mailbox,
                    id: JSON.parse(localStorage.getItem('user')).id
                }
                // console.log(data)
                this.updateUserInfo(data);
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
            submitPswdForm() {
                this.$refs['elFormPswd'].validate(valid => {
                    if (!valid) return
                    let u = JSON.parse(localStorage.getItem('user'))
                    let data = {
                        oldPassword: this.formDataPswd.old,
                        newPassword: this.formDataPswd.new,
                        id: JSON.parse(localStorage.getItem('user')).id
                    }
                    // console.log(data)
                    this.updatePassword(data);
                })
            },
            resetPswdForm() {
                this.$refs['elFormPswd'].resetFields()
            },
            parseUserData() {
                let tmp = JSON.parse(localStorage.getItem('user'));
                this.userData.name = tmp.name;
                this.userData.tele = tmp.phoneNumber;
                this.userData.email = tmp.email==null?'10001@qq.com':tmp.email;
                this.userData.role = this.role[tmp.role];
                this.password = tmp.password;
                console.log(this.password)

                this.formData.name = tmp.name;
                this.formData.mobile = tmp.phoneNumber;
                this.formData.email = tmp.email==null?'10001@qq.com':tmp.email;
            },
            updateUserInfo(data) {
                axios.post('UserMethodServlet', data)
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            let tmp = JSON.parse(localStorage.getItem('user'));

                            tmp.name = data.name
                            tmp.email = data.email
                            tmp.phoneNumber = data.phoneNumber
                            localStorage.removeItem('user')
                            localStorage.setItem('user', JSON.stringify(tmp));
                            ELEMENT.Message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('修改失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            updatePassword(params) {
                axios.get('UserPasswordServlet', {params})
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            let tmp = JSON.parse(localStorage.getItem('user'));
                            tmp.password = params.newPassword
                            this.password = params.newPassword
                            localStorage.removeItem('user')
                            localStorage.setItem('user', JSON.stringify(tmp));
                            ELEMENT.Message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('修改失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
        },
        created() {
            this.parseUserData()
        }
    })

</script>
<style>
    @import "assets/css/base.css";
    .main-wrapper {
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .main-wrapper .sidebar-wrapper {
        width: 15vw;
        height: 100vh;
        position: fixed;
        left: 0;
    }
    .main-wrapper .main-container {
        margin-left: 15vw;
        width: 85vw;
        height: 100vh;
    }
    .main-container .app-container {
        padding: 1.5vw 1.5vw;
    }
    .main-container .app-container .profile-wrapper {
        display: flex;
        justify-content: space-between;
    }
    .main-container .app-container .profile-wrapper .card-container {
        width: 23%;
        display: flex;
        flex-direction: column;
        padding: 0.8vw 0 2vw;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #e6ebf5;
        border-radius: 4px;
    }

    .card-container .card-title {
        padding: 0.5vw 1vw;
        border-bottom: 1px solid #e6ebf5;
    }
    .card-container .card-body {
        padding: 1.5vw 1.5vw 0.5vw;
    }
    .card-container .card-body .headimg-box {
        display: flex;
        height: 8vw;
        justify-content: center;
        padding: 0.5vw;

    }
    .card-container .card-body .headimg-box img {
        width: 100%;
        border-radius: 50%;
        overflow: hidden;
    }
    .card-container .card-body .info-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 0.92vw;
        border-top: 1px solid #e7eaec;
        margin-top: 1.2vw;
    }
    .card-container .card-body .info-box .info-item {
        display: flex;
        justify-content: space-between;
        padding: 0.8vw 0;
        border-bottom: 1px solid #e7eaec;
    }
    /*.card-container .card-body .info-box .info-item .info-title {*/
    /*    */
    /*}*/


</style>
</body>
</html>
